<template>
  <div class="orrBusinessDurationEfficiency-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="550px"
    >
      <div style="padding-right: 50px; padding-top: 20px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="100"
        >
          <el-form-item label="门店编号" prop="storeNumber">
            <el-input
              placeholder="请输入门店编号"
              v-model="modelValue.form.storeNumber"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="门店名称" prop="storeName">
            <el-input
              placeholder="请输入门店名称"
              v-model="modelValue.form.storeName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-input
              placeholder="请输入日期"
              v-model="modelValue.form.date"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="营业时段" prop="periodTime">
            <el-input
              placeholder="请输入营业时段"
              v-model="modelValue.form.periodTime"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="出杯数量" prop="count">
            <el-input
              placeholder="请输入出杯数量"
              v-model="modelValue.form.count"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="CPU时间" prop="aveCpuTime">
            <el-input
              placeholder="请输入CPU时间"
              v-model="modelValue.form.aveCpuTime"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="物料准备时间" prop="aveMaterialTime">
            <el-input
              placeholder="请输入物料准备时间"
              v-model="modelValue.form.aveMaterialTime"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="操作时间（秒）" props="aveOperateTime">
            <el-input
              placeholder="请输入操作时间（秒）  "
              v-model="modelValue.form.aveOperateTime"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="操作占比" prop="aveOperateProportion">
            <el-input
              placeholder="请输入操作占比"
              v-model="modelValue.form.aveOperateProportion"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="物料占比" prop="aveMaterialProportion">
            <el-input
              placeholder="请输入物料占比"
              v-model="modelValue.form.aveMaterialProportion"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="操作占比字符串" prop="aveOperateProportions">
            <el-input
              placeholder="请输入操作占比字符串"
              v-model="modelValue.form.aveOperateProportions"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="物料占比字符串"
            prop="averageMaterialProportions"
          >
            <el-input
              placeholder="请输入物料占比字符串"
              v-model="modelValue.form.averageMaterialProportions"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addOrrBusinessDurationEfficiency,
  updateOrrBusinessDurationEfficiency,
} from '@/api/orr-business-duration-efficiency.api'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    storeNumber: form.storeNumber,
    storeName: form.storeName,
    date: form.date,
    periodTime: form.periodTime,
    count: form.count,
    aveCpuTime: form.aveCpuTime,
    aveMaterialTime: form.aveMaterialTime,
    aveOperateTime: form.aveOperateTime,
    aveOperateProportion: form.aveOperateProportion,
    aveMaterialProportion: form.aveMaterialProportion,
    aveOperateProportions: form.aveOperateProportions,
    averageMaterialProportions: form.averageMaterialProportions,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateOrrBusinessDurationEfficiency({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addOrrBusinessDurationEfficiency(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped></style>
